<div class="row">
    <div class="col-md-12">
        <uib-tabset active="activeJustified" justified="true">
            <uib-tab index="$index" data-ng-repeat="section in sections track by $index" select="onTabsSelected(section.id)">
                <uib-tab-heading class="elipsize">
                    <i class="mdi"  ng-class="section.icon"></i>
                    <br>
                    {{section.name}}

                </uib-tab-heading>
                <br><br>
                <div class="clearfix"></div>
                <!--<div data-ui-view="{{ section.id }}"></div>-->
            </uib-tab>
        </uib-tabset>

        <div ng-if="activeSection === 'details'" data-ui-view="details"></div>
        <div ng-if="activeSection === 'groups'" data-ui-view="groups"></div>
        <div ng-if="activeSection === 'credentials'" data-ui-view="credentials"></div>
        <!--<div ng-if="activeSection === 3" data-ui-view="apis"></div>-->
        <div ng-if="activeSection === 'services'" data-ui-view="services"></div>
        <div ng-if="activeSection === 'plugins'" data-ui-view="plugins"></div>
    </div>
</div>

